<!-- 打卡情况展示模块，这一部分属于经理或者部门主管展示的地方 -->

<template>
    <div>

        <div>
            <h1>出勤状态</h1>
            <!-- 表格，根据缺勤数量从上往下比较  ID 出勤次数 缺勤-->

            <div style="text-align: center;">
                <el-button type="primary" size="small" style="float: left;" @click="initMonth">当前月</el-button>
                <span> 当前年月：{{ currentMonth.format("YYYY-MM") }} </span>
                <el-button-group style="float: right;">
                    <el-button type="primary" size="small" icon="el-icon-arrow-left" @click="priorMonth">上月</el-button>
                    <el-button type="primary" size="small" @click='nextMonth'>下月<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>
            </div>
            <el-table :data="clockStatus">
                <caption> 当月出勤情况 </caption>
                <el-table-column label="ID" prop="user_id" width="50px"></el-table-column>
                <el-table-column label="部门" prop="department"></el-table-column>
                <el-table-column label="姓名" prop="user_name"></el-table-column>
                <el-table-column label="缺勤次数" prop="absenceTimes"></el-table-column>
                <el-table-column label="全勤次数" prop="presenceTimes"></el-table-column>
                <el-table-column label="个人打卡情况展示">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="changeIsShowPersonalClockInOut(scope.$index, scope.row.user_id)">展示</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :visible="isShowPersonalClockInOut" :before-close="changeIsShowPersonalClockInOut">
            <clock-in-out :user_id="quaryUserId"></clock-in-out>
        </el-dialog>

    </div>
</template>

<script>
    import echarts from "echarts"
    import axios from "axios"
    import clockInOut from "./clockInOut.vue"
    import moment from "moment"


    export default {
        name: "clockInOutShow",
        components: {
            clockInOut
        },
        data: function() {
            return {
                clockStatus: [{
                        user_id: "11",
                        user_name: "thisisme",
                        absenceTimes: 2,
                        presenceTimes: 20,
                    },
                    {
                        user_id: "22",
                        user_name: "thisisme",
                        absenceTimes: 2,
                        presenceTimes: 20,
                    },
                    {
                        user_id: "33",
                        user_name: "thisisme",
                        absenceTimes: 2,
                        presenceTimes: 20,
                    }
                ],
                isShowPersonalClockInOut: false,
                quaryUserId: "123",
                currentMonth: null,
            }
        },
        methods: {
            /* 展示或者关闭个人展示页面的函数 */
            changeIsShowPersonalClockInOut: function(index, user_id) {
                if (user_id != null) {
                    this.quaryUserId = null;
                    this.quaryUserId = user_id;
                }
                this.isShowPersonalClockInOut = !this.isShowPersonalClockInOut;
            },

            /**
             * @description  获取当月的缺勤情况等等
             *              默认展示当前页
             */
            getClockStatus: function() {
                var _this = this;
                _this.clockStatus.length = 0;
                axios.post("http://127.0.0.1:8000/api/clock/status/", JSON.stringify({
                        month: _this.currentMonth.format("YYYY-MM")
                    }))
                    .then(function(response) {
                        // console.log("this is getClockStatus");
                        // console.log(response);

                        for (var i = 0; i < response.data.data.length; ++i) {
                            // console.log(response.data.data[i])
                            _this.clockStatus.push({
                                user_id: response.data.data[i].id,
                                user_name: response.data.data[i].name,
                                department: response.data.data[i].department,
                                absenceTimes: response.data.data[i].absence,
                                presenceTimes: response.data.data[i].presence,
                            })
                            // console.log(response.data.data[i])
                        }

                        // console.log("this is ok")
                        // console.log(_this.clockStatus);
                    })
                    .catch(function(error) {

                    })
            },


            /**
             * @description  初始化当前的月份，格式化为"2020-06"
             */
            initMonth: function() {
                // let curDate = new date()
                // this.currentMonth = String(curDate.getFullYear()) + "-" + String(curDate.getMonth());
                this.currentMonth = new moment();
                // console.log(this.currentMonth.format("YYYY-MM"));
                this.getClockStatus();
            },

            /**
             * @description  设定为下一个月份
             */
            nextMonth: function() {
                // this.currentMonth = Date.setTime(this.currentMonth.parse() + )
                this.currentMonth.add(1, 'M');
                // console.log(this.currentMonth.format("YYYY-MM"));
                this.getClockStatus();
            },

            /**
             * @description 设定为上一个月份
             */
            priorMonth: function() {
                this.currentMonth.add(-1, 'M');
                // console.log(this.currentMonth.format("YYYY-MM"));
                this.getClockStatus();
            }
        },
        mounted: function() {
            // this.showEcharts();
            this.initMonth();
            // this.getClockStatus();
            this.quaryUserId = ""; 
        }
    }
</script>

<style>

</style>
